<template>
  <div class="privacy">
    <h2>Privacy Policy & Cookie Usage</h2>
    <p>
      At {{ title }}, we are committed to protecting your privacy and ensuring transparency in how we handle your data. This policy outlines our practices regarding data collection, usage, and your rights under applicable data protection laws.
    </p>

    <h3>Understanding Cookies</h3>
    <p>
      Cookies are small text files that are stored on your device when you visit our website. They help us provide you with a better browsing experience and enable certain features to function properly.
    </p>

    <h3>Types of Cookies We Use</h3>
    
    <h4>● Essential Cookies</h4>
    <p>
      These cookies are necessary for the website to function properly. They enable core functionality such as security, network management, and account access. You cannot opt out of these cookies as they are required for the website to work.
    </p>

    <h4>● Performance Cookies</h4>
    <p>
      We use these cookies to understand how visitors interact with our website. They help us analyze which pages are most popular, how visitors move around the site, and identify any technical issues. This information helps us improve our website's performance and user experience.
    </p>

    <h4>● Functional Cookies</h4>
    <p>
      These cookies remember your preferences and settings to provide a more personalized experience. They may include language preferences, region settings, and other customization options.
    </p>

    <h4>● Marketing Cookies</h4>
    <p>
      We use these cookies to deliver relevant advertisements and track the effectiveness of our marketing campaigns. They help us understand which content and offers are most appealing to our users.
    </p>

    <h3>Data Collection and Usage</h3>
    <p>
      We collect and process the following types of information:
    </p>
    <ul>
      <li>Device information (browser type, operating system)</li>
      <li>Usage data (pages visited, time spent on site)</li>
      <li>IP address and location data</li>
      <li>Interaction data (clicks, downloads, searches)</li>
    </ul>

    <h3>How We Protect Your Data</h3>
    <p>
      We implement appropriate technical and organizational measures to protect your personal data against unauthorized access, alteration, disclosure, or destruction. Our security measures include:
    </p>
    <ul>
      <li>Regular security assessments</li>
      <li>Encryption of sensitive data</li>
      <li>Secure server infrastructure</li>
      <li>Regular security updates</li>
    </ul>

    <h3>Your Rights and Choices</h3>
    <p>
      You have the right to:
    </p>
    <ul>
      <li>Access your personal data</li>
      <li>Request correction of inaccurate data</li>
      <li>Request deletion of your data</li>
      <li>Object to data processing</li>
      <li>Withdraw consent for marketing communications</li>
    </ul>

    <h3>Managing Cookies</h3>
    <p>
      You can control and manage cookies in various ways:
    </p>
    <ul>
      <li>Browser settings: Most browsers allow you to manage cookie preferences</li>
      <li>Third-party tools: Various privacy tools can help manage cookies</li>
      <li>Opt-out options: Specific opt-out mechanisms for certain services</li>
    </ul>

    <h3>Policy Updates</h3>
    <p>
      We may update this privacy policy periodically to reflect changes in our practices or for other operational, legal, or regulatory reasons. We encourage you to review this policy regularly to stay informed about how we are protecting your information.
    </p>

    <h3>Contact Information</h3>
    <p>
      If you have any questions or concerns about our privacy practices, please contact us at:
    </p>
    <p>
      Email: <a :href="`mailto:${email}`">{{ email }}</a><br>
    </p>
  </div>
</template>

<script setup>
definePageMeta({
  title: 'Privacy',
  layout: 'other'
})
const hostname = useHostname()
const { name: title } = getThemeConfig(hostname)
const email = getEmail(hostname)
</script>

<style scoped lang="scss">
.privacy {
  padding: 30px;
  background-color: #fff;
  border-radius: 10px;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
  max-width: 1200px;
  margin: 20px auto;

  h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #333;
    font-weight: 600;
  }

  h3 {
    font-size: 24px;
    margin: 30px 0 20px;
    color: #333;
    font-weight: 600;
  }

  h4 {
    font-size: 18px;
    margin: 25px 0 15px;
    color: #444;
    font-weight: 500;
  }

  p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 15px;
  }

  ul {
    list-style-type: none;
    padding-left: 20px;
    margin-bottom: 20px;

    li {
      font-size: 16px;
      line-height: 1.6;
      color: #666;
      margin-bottom: 10px;
      position: relative;

      &:before {
        content: "•";
        position: absolute;
        left: -15px;
        color: #666;
      }
    }
  }
}
</style>